<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"      
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="content">
                
                    <h:form id="create" enctype="multipart/form-data">            
                        <p:panel id="panel" header="New Person"> 
                            <p:messages id="msgs"/>
                            <h:panelGrid columns="3" border="0">
                                <div><p:graphicImage styleClass="userImg" value="/resources/img/users/defaultUser.png"/> 
                                </div>
                                <h:outputLabel for="fname" value="Firstname: *" /> 
                                <p:inputText id="fname" value="#{newuserbean.user.fname}" required="true" label="Firstname">  
                                    <f:validateLength minimum="2" />  
                                </p:inputText>  
                                <p:message for="fname" display="icon"/> 
                                <h:outputLabel for="lname" value="Lastname: *" /> 
                                <p:inputText id="lname" value="#{newuserbean.user.lname}" required="true" label="Lastname">  
                                    <f:validateLength minimum="2" />  
                                </p:inputText>  
                                <p:message for="lname" display="icon"/>
                                <h:outputLabel for="username" value="Username: *" /> 
                                <p:inputText id="username" value="#{newuserbean.user.username}" required="true" label="Username">  
                                    <f:validateLength minimum="2" />  
                                </p:inputText>                                  
                                <p:message for="username" display="icon"/>
                                
                                <h:outputLabel for="password" value="Password: *" />
                                <p:password id="password" value="#{newuserbean.user.password}" required="true" label="Password">  
                                    <f:validateLength minimum="3" />  
                                </p:password>                                  
                                <p:message for="password" display="icon"/>
                                
                                <h:outputLabel for="passwordv" value="Password(Verify): *" />
                                <p:password id="passwordv" value="#{newuserbean.passwordv}" required="true" label="Password(Verify)">  
                                    <f:validateLength minimum="3" />  
                                </p:password>                                  
                                <p:message for="passwordv" display="icon"/>
                                <h:outputLabel for="pic" value="Photo: " />
                                <p:inputText id="pic" value="#{newuserbean.user.pic}"  label="pic"/>
                            </h:panelGrid>
                            <p:commandButton id="submit" 
                                             value="Create" update="panel"
                                             actionListener="#{newuserbean.createUser}"
                                             oncomplete="handleCreateUserRequest(xhr, status, args)"
                                             />
                            <h:messages style="color: red" globalOnly="true"/>
                        </p:panel>
                    </h:form>
                
                <script type="text/javascript">
                        function handleCreateUserRequest(xhr, status, args) {
                            if(args.validationFailed) {
                                jQuery('#create').effect("shake", { times:2 }, 100);
                            } else {
                                window.location='home.xhtml';
                            }
                        }
                </script>
            </ui:define>

        </ui:composition>

    </body>
</html>
